<template>
  <el-main>
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="公寓名称" prop="">
        <el-input v-model="ruleForm.flatName" placeholder="公寓名称"></el-input>
      </el-form-item>
      <el-form-item label="楼盘名称" prop="">
        <el-input v-model="ruleForm.name" @blur="getPremisesInfoList" style="width: 200px" placeholder="楼盘名称"></el-input>
        <el-link href="http://localhost/house/add" type="primary" style="margin-right: 20px">添加楼盘</el-link>
      </el-form-item>
<!--      <el-form-item label="楼盘名称" prop="">
        <el-autocomplete
          class="inline-input"
          v-model="ruleForm.name"
          :fetch-suggestions="getPremisesInfoList"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          :popper-append-to-body="false"
          @select="handleSelect">
        </el-autocomplete>-->
        <!--          <span @click="addPremises">找不到?店家添加新楼盘</span>-->

<!--      </el-form-item>-->
      <el-form-item label="公共配套" prop="">
        <el-checkbox-group v-model="ruleForm.publicFacilitys">
          <el-checkbox v-for="item in this.publicList" :label="item.id" :value="item.id">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="公共区域图片">
        <el-upload
          ref="houseImage"
          action="http://localhost/dev-api/file/upload"
          :headers="myHeaders"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload2" multiple>
          <el-button type="info">上传图片</el-button>
          <img v-if="this.ruleForm.houseImage" :src="this.ruleForm.houseImage" height="120px" width="120px">
        </el-upload>
      </el-form-item>
      <el-form-item label="付款方式" prop="">
        押
        <el-select v-model="ruleForm.paymentMortgage" placeholder="">
          <el-option label="0" value="0"></el-option>
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select>
        付
        <el-select v-model="ruleForm.paymentPay" placeholder="">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
          <el-option label="6" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="户型" prop="">
        <el-select v-model="ruleForm.room" placeholder="">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
          <el-option label="6" value="6"></el-option>
          <el-option label="7" value="7"></el-option>
          <el-option label="8" value="8"></el-option>
          <el-option label="9" value="9"></el-option>
        </el-select>
        室
        <el-select v-model="ruleForm.hall" placeholder="">
          <el-option label="0" value="0"></el-option>
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
        厅
      </el-form-item>
      <el-form-item label="公共装修情况" prop="">
        <el-select v-model="ruleForm.decorate" placeholder="">
          <el-option label="精装" value="0"></el-option>
          <el-option label="简装" value="1"></el-option>
          <el-option label="毛坯" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设置管家" prop="">
        <el-select v-model="ruleForm.manager" placeholder="">
          <el-option v-for="item in this.userList" :label="item.username" :value="item.userId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房源介绍" prop="">
        <el-input type="textarea" v-model="ruleForm.introduce"></el-input>
      </el-form-item>

      <el-button type="warning" @click="dialogFormVisible = true">添加房型</el-button>
      <br>
      <span v-for="item in this.ruleForm.houseStyles">
       <img v-if="item.roomImage" :src="item.roomImage" height="120px" width="120px">
       <br>
       {{ item.acreage }}
       <br>
      </span>
      <el-form-item>
        <el-button type="warning" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="添加房型" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="房型名称">
          <el-input v-model="form.acreage" autocomplete="off" placeholder="房型名称"></el-input>
        </el-form-item>
        <el-form-item label="面积" prop="">
          <el-input v-model="form.proportion" placeholder="面积(平方米)"></el-input>
          平方米
        </el-form-item>
        <el-form-item label="朝向" prop="">
          <el-select v-model="form.direction" placeholder="">
            <el-option value="2" label="南">南</el-option>
            <el-option value="4">北</el-option>
            <el-option value="5">东南</el-option>
            <el-option value="7">西南</el-option>
            <el-option value="1">东</el-option>
            <el-option value="3">西</el-option>
            <el-option value="6">东北</el-option>
            <el-option value="6">西北</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="独立配套" prop="">
          <el-checkbox-group v-model="form.privateFacilitys">
            <el-checkbox v-for="item in this.privateList" :label="item.id" :value="item.id">{{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="租金" prop="">
          <el-input placeholder="租金(元/月)" v-model="form.rental"></el-input>
        </el-form-item>
        <el-form-item label="独立区域图片">
          <el-upload
            ref="roomImage"
            action="http://localhost/dev-api/file/upload"
            :headers="myHeaders"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload1" multiple>
            <el-button type="info">上传图片</el-button>
            <img v-if="this.form.roomImage" :src="this.form.roomImage" height="120px" width="120px">
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="addHousestyle">确 定</el-button>
      </div>
    </el-dialog>

  </el-main>
</template>

<script>

import {addHouse, addHousestyle, getPrivate, getPublic, getUserList, TbPremisesInfoList} from "@/api/business/room";
import {getToken} from "@/utils/auth";
export default {
  name: "addJZ",
  data() {
    return {
      myHeaders:{ 'Authorization': 'Bearer ' + getToken() },
      ruleForm: {
        flatName: '',
        premisesId: '',
        name: '',
        reserve1: '0',
        type: '',
        status: '0',
        buildingNo: '',
        unitNo: '',
        roomNo: '',
        room: '',
        hall: '',
        decorate: '',
        floor: '',
        floorCount: '',
        manager: '',
        proportion: '',
        rental: '',
        paymentMortgage: '',
        paymentPay: '',
        publicFacilitys: [],
        //roomInfoprivates:[],
        //publicFacility:'',
        roomInfoprivate: '',
        houseImage: '',
        houseImages: [],
        roomImage: '',
        roomImages: [],
        introduce: '',
        houseStyles: []
      },
      imageUrl: '',
      //用于存储下拉框多选框的值
      userList: [],
      privateList: [],
      publicList: [],
      PremisesInfoList: [],

      //弹出框
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        houseId:"",
        acreage: '',
        proportion: '',
        direction: '',
        privateFacility: '',
        privateFacilitys: [],
        rental: '',
        roomImage: '',
        roomImages: [],
      },
      formLabelWidth: '120px',
    };
  },
  methods: {
    submitForm(formName) {
      // 添加表单
      addHouse(this.ruleForm).then(rep=>{
        this.$message.success("添加成功")
        this.form.houseId=rep.data;
        this.dialogFormVisible = true
      })
    },
    addHousestyle() {
      // 处理 私有配套id
      for (var r in this.form.privateFacilitys) {
        this.form.privateFacility += "," + this.form.privateFacilitys[r];
      }
      // 添加表单
      addHousestyle(this.form).then(rep=>{
        this.$message.success("添加成功房型")
        this.dialogFormVisible = false
        this.$router.push("room")
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getUserList() {
      getUserList().then(res => {
        console.log("输出user")
        this.userList = res.data;
        console.log(this.userList);
      })
    },
    getPrivateList() {
      getPrivate().then(res => {
        console.log("输出private");
        this.privateList = res.data;
        console.log(this.privateList);
      })
    },
    getPublicList() {
      getPublic().then(res => {
        console.log("输出public")
        this.publicList = res.data;
        console.log(this.publicList);
      })
    },
    //方法获取list
    getPremisesInfoList() {
      TbPremisesInfoList(this.ruleForm.name).then(res => {
        console.log(res.data.length)
        if (res.data.length == 0){
          this.$message.error("该楼盘不存在")
        }else {
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    //是选中某一列触发的事件,在这里item为选中字段所在的对象
    handleSelect(item) {
      console.log("输出----下拉数据")
      console.log(item);
      if (item.id == "addPremises") {
        this.$router.push({path: "/building/addhouse", query: {name: item.name}});
      } else {
        this.ruleForm.premisesId = item.id;
      }
    },
    //添加楼盘 跳转
    addPremises() {
      //改成添加楼盘的
      let name = this.ruleForm.name;
      this.$router.push({path: "/house/info/add", query: {name: name}});
    },
    handleAvatarSuccess1(res, file) {
      console.log("成功1")
      console.log(res, file);
      this.form.roomImage=res.data.url;
    },
    beforeAvatarUpload1(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess2(res, file) {
      console.log("成功2")
      console.log(res, file);
      this.ruleForm.houseImage=res.data.url;
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    addRoom() {
      this.dialogFormVisible = false;

      for (var r in this.form.privateFacilitys) {
        this.form.privateFacility += "," + this.form.privateFacilitys[r];
      }
      this.form.privateFacility = this.form.privateFacility.substr(1);
      this.ruleForm.houseStyles.push(this.form);
      this.form = {
        acreage: '',
        proportion: '',
        direction: '',
        privateFacility: '',
        privateFacilitys: [],
        rental: '',
        roomImage: '',
        roomImages: [],
      };
    },
  },
  created() {
    this.getUserList();
    this.getPrivateList();
    this.getPublicList();
    let parse;
    let rowInfo;
    if(this.$route.query.rowInfo!=undefined){
      parse = JSON.parse(this.$route.query.rowInfo);
      rowInfo  = this.$route.query.rowInfo;

    }
    console.log('回显信息：', parse);
    if (rowInfo) {
      this.ruleForm.flatName = parse.flatName;
      this.ruleForm.premisesId = parse.premisesId
      this.ruleForm.buildingNo = parse.buildingNo
      this.ruleForm.room = parse.room;
      this.ruleForm.name = parse.preName;
      this.ruleForm.hall = parse.hall
      this.ruleForm.decorate = parse.decorate;
      this.ruleForm.publicFacilitys = parse.publicFacility.split(",").map(Number);
      console.log('嗷嗷', this.ruleForm.publicFacilitys)
      this.ruleForm.paymentMortgage = parse.paymentMortgage;
      this.ruleForm.paymentPay = parse.paymentPay;
      this.ruleForm.introduce = parse.introduce;
      this.ruleForm.manager = parse.manager;
    }
  }
}
</script>

<style>
.el-autocomplete-suggestion {
  width: auto !important;
}
</style>
